<!DOCTYPE html>
<html lang="zh-Hans" xmlns:th="http://www.thymeleaf.org">
<th:block th:include="frontInclude :: frontHeader"/>
<script th:src="@{/css/assets/js/validator.min.js}" type="text/javascript"></script>
<body>
<header class="header opaque" th:replace="frontInclude :: header_menu"></header>
<div class="container">
    <div class="main w1200">
        <div class="article w1">
            <div class="article-box">
                <header class="article-top">
                    <h1 class="article-tit">在线留言</h1>
                </header>
                <article class="article-main">
                    <form th:action="@{/front/contact/submit}" method="post" id="saypl" data-toggle="validator"
                          role="form">
                        <ul>
                            <li class="form-group">
                                <label class="control-label" for="userName">姓名</label>
                                <input type="text" id="userName" name="userName" class="form-control text" value=""
                                       placeholder="姓名（必填）" size="28"
                                       tabindex="1" required>
                            </li>
                            <li class="form-group">
                                <label class="control-label" for="mobile">电话</label>
                                <input type="text" id="mobile" name="mobile" class="form-control text" value=""
                                       placeholder="电话（必填）" size="28"
                                       tabindex="1" required>
                            </li>
                            <li style="position: relative;" class="form-group">
                                <label class="control-label" for="wechat">微信号</label>
                                <input type="text" id="wechat" name="wechat" class="form-control text" value=""
                                       placeholder="微信号" size="28"
                                       tabindex="2">
                            </li>
                        </ul>
                        <p class="form-group npt">
                            <label class="control-label" for="saytext">留言</label>
                            <textarea name="message" id="saytext" class="form-control text" cols="50" rows="4"
                                      tabindex="5" placeholder="留言" required></textarea>
                        </p>
                        <p class="form-group" style="margin-top: 5px">
                            <input type="submit" tabindex="6" value="提交" class="button">
                        </p>
                    </form>
                </article>
            </div>
        </div>
    </div>
</div>
<script>
    $('.header').removeClass('opaque').addClass('noOpaque');
    // $(document).ready(function() {
    //     $('#saypl').validate({
    //         rules: {
    //             userName: {
    //                 required: true,
    //                 maxlength: 64
    //             },
    //             mobile: {
    //                 required: true,
    //                 maxlength: 64
    //             },
    //             saytext: {
    //                 required: true,
    //                 maxlength: 512
    //             }
    //         },
    //         messages: {
    //             userName: {
    //                 required: "请填写您的姓名！",
    //                 maxlength:"姓名最多64个字符！"
    //             },
    //             mobile: {
    //                 required: "请填写您的电话，方便我们联系到您！",
    //                 maxlength:"电话号码最多64个字符！"
    //             },
    //             saytext:  {
    //                 required: "请填写您的留言！",
    //                 maxlength:"留言内容最多512个字符！"
    //             }
    //         },
    //         errorElement: 'span',
    //         errorPlacement: function (error, element) {
    //             error.addClass('invalid-feedback');
    //             element.closest('.form-group').append(error);
    //         },
    //         highlight: function (element, errorClass, validClass) {
    //             $(element).addClass('is-invalid');
    //         },
    //         unhighlight: function (element, errorClass, validClass) {
    //             $(element).removeClass('is-invalid');
    //         }
    //     });
    // });
    $('#form').validator().on('submit', function (e) {
        if (e.isDefaultPrevented()) {
            // handle the invalid form...
        } else {
            // everything looks good!
        }
    })

</script>

<div th:replace="frontInclude :: footer"></div>
</body>
</html>